<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="css/tsShowUI.min.css">
    <!--App自定义的css-->
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <button id="ts-cancle" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span><span class=" mui-tscancel">返回</span></button>
        <h1 class="mui-title mui-tstitle"></h1>
    </header>
    <footer class="mui-bar mui-bar-footer mui-bar-tsfooter">
        <button id="ts-post-btn" class="mui-ts-footerbth btn mui-btn-block mui-btn-blue mui-tsaction" data-loading-text="执行中" type="button">开始</button>
    </footer>
    <div class="mui-content">
        <form class="mui-tsform">
            <div class="mui-card" id="renderbox">
            </div>
        </form>
    </div>
    <script src="js/tsShowUI.js"></script>
    <script>
    (function($, doc) {
        var uiVersion=$.getVersion();//获取ui版本
        // $.ajax('json/test.json', {
        //     dataType: 'json', //服务器返回json格式数据
        //     type: 'get', //HTTP请求类型
        //     timeout: 10000, //超时时间设置为10秒；
        //     success: function(data) {
        //         $.renderUI(data)
        //     },
        //     error: function(xhr, type, errorThrown) {

        //     }
        // });
        $.renderUI({//通过$.renderUI方法来添加组件（页面只需添加一次）
            "title": "触动精灵脚本配置",//给页面添加标题（默认标题无）
            "cancelname": "取消",//给页面取消按钮添加文字（默认文字无）
            "okname": "开始哈",//给页面开始按钮添加文字（默认“开始”）
             "view": [{
                "type": "switches",
                "list": "开关1,开关2,开关3",
                "select": "0@2"
            },{
                "id": "haha2",
                "type": "switches",
                "list": "开关1,开关2,开关3",
                "select": "0@2"
            },{
        "type": "Edit",
        "prompt": "请输入一个数字",
        "text": "2",
        "kbtype": "range",
        "max":"100",
        "min":"0",
    }]
        })
        $.renderUI({//单独添加组件方法
            "view": [{
                "id": "haha3",//组件id
                "type": "switches",//组件类型
                "list": "开关1,开关2,开关3",
                "select": "0@2"//组件初始选中项
            }]
        })
        $.renderUI({//通过$.renderUI方法来添加组件（页面只需添加一次）
             "view": [{
        "type": "ComboBox",
        "list": "选项1,选项2,选项3",
        "select": "2#1",
        "id": "combobox3",
        "data": "子选项1,子选项2,子选项3,子选项4#子选项5,子选项6,子选项7#子选项8,子选项9",
        "source": "test"
    }, {
        "type": "ComboBox",
        "id": "combobox4",
        "list": "选项1,选项2,选项3,选项4,选项5,选项6,选项7",
        "select": "1"
    },{
        "type": "Edit",
        "prompt": "请输入一个数字",
        "text": "2",
        "kbtype": "range",
        "max":"100",
        "min":"0",
    }]
        })
    })(mui, document)
    </script>
</body>

</html>
